
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery最简单的滚动到scrollto插件 - 懒人建站</title>

<script src="http://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
    jQuery.scrollto = function(scrolldom,scrolltime) {
        
        $(scrolldom).click( function(){ 
            var scrolltodom = $(this).attr("date-scroll");
            $(this).addClass("thisscroll").siblings().removeClass("thisscroll");
            $('html,body').animate({
                scrollTop:$(scrolltodom).offset().top},scrolltime
            );
            return false;
        }); 
        
    };
  
    $.scrollto("#scrollnav a",600);
});
</script>
<style>
p{ height:900px;}
.scrollnav{ width:100px; position:fixed; right:29px; top:120px;
_position:absolute;_top:expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight-300);/*解决IE6 中的固定定位效果的。你可以通过-300 来改变 菜单距离 顶部的*/}
.scrollnav a{ display:block; height:30px; line-height:30px;}
.thisscroll{ color:#F00;}
</style>
</head>

<body>
<div class="scrollnav" id="scrollnav">
    <a href="http://www.51xuediannao.com/js/nav/" date-scroll="#scrollto1">导航菜单</a>
    <a href="http://www.51xuediannao.com/js/slide/" date-scroll="#scrollto2">焦点幻灯片</a>
    <a href="http://www.51xuediannao.com/jquery_tanchu/" date-scroll="#scrollto3">jquery弹出层</a>
    <a href="#" date-scroll="#scrollto4">返回顶部</a>
    <a href="#" date-scroll="#dibu">到底部</a>
</div>

<p id="scrollto4">最简单的滚动到（scrollto）插件，功能少，jquery代码少，逻辑简单，一看就明白。这种简单的jquery插件有时候还是蛮有用的。<br/><br/>
这个最简单的jquery滚动到插件你灵活运用一下就有多种玩法，比如，可以做出 滚动到顶部、滚动到中部、滚动到底部、滚动要任意位置。你是要做的就是那个需要点击的导航链接中的  date-scroll="#scrollto1" 和那个要滚动到scrollto的id对应就可以了。^_^<br/><br/>

特别注意：样式中的_position:absolute;_top:expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight-300)是解决IE6固定定位效果的。你可以通过-300 来改变 菜单距离 顶部的距离。
<br/><br/>
懒人建站希望这个最简单的jquery滚动到插件能给你帮助。界面就是最原始的文字排版，界面设计和css需要哥哥姐姐自行解决了，如果不会做，懒人建站表示很遗憾，如果你不会css你可以找个漂亮的界面或者自己做个漂亮的界面，来找懒人建站协助一下。懒人QQ群在顶部可以看到。</p>

<p id="scrollto1">导航菜单 </p>
    <p id="scrollto2">焦点幻灯片</p>
    <p id="scrollto3">jquery弹出层
                <span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理 我要学电脑.COM →51xuediannao.com</a> </span><br>
                <a href="http://www.51xuediannao.com/">懒人建站 http://www.51xuediannao.com/</a><br /><br/>
                <span> 、我们为您提供-
                <a href="http://www.51xuediannao.com/html+css/">html+css</a>，
                <a href="http://www.51xuediannao.com/">jquery特效</a>，
                <a href="http://www.51xuediannao.com/js/">JS代码</a>，
                <a href="http://www.51xuediannao.com/js/texiao/">网页特效</a>，
                <a href="http://www.51xuediannao.com/js/nav/">导航菜单</a>，
                <a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a>，
                <a href="http://www.51xuediannao.com/qqkefu/">qq在线客服代码</a>
                <a href="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a>
                <a href="http://www.51xuediannao.com/jquery_tanchu/">jquery弹出层</a>
                </span> <br />
                <span>懒人建站只收录实用和能提高用户体验的代码</span><br />
                <span>懒人建站致力于解放您的部分写代码时间，提高您的工作效率！</span>
    </p>
<span id="dibu">我是底部 哈哈</span>
</body>
</html>